<template>

    <div class="wappers">

      <div class="leftbar">

  <!--      左侧导航点 -->
        <div ref="point" class="point">

        </div>

  <!--      左侧单个选项-->
        <div ref="btn" @click="choosecom(index)" class="titlewapper" v-for="(item,index) in list">
            {{item}}
        </div>

      </div>


    <!--    组件显示容器-->
        <div class="center">
          <div style="margin:30px"></div>

    <!--      切换显示组件-->
          <component :is="com"></component>
          <div style="margin:30px"></div>

        </div>
      </div>


</template>

<!--此处因为是移动端项目使用了rem布局所以电脑端样式有点问题-->
<script>
import son1 from "./son1";
import son2 from "./son2";
import son3 from "./son3";
import son4 from "./son4";
import son5 from "./son5";
import son6 from "./adminOrderList";
import son7 from "./adminUserList";
export default {
components:{
  son1,son2,son3,son4,son5,son6,son7
},
  data() {
    return {
      list:["商品添加","用户权限审核","产品分类管理","广告投放","商品管理","订单列表","用户列表",],
      //显示的组件，默认是第一个
      com:'son1',
      width:'',
      height:'',
    }
  },
  methods: {
    choosecom(idx){

      //获取所有节点,将上一次的颜色变回来
      this.$refs.btn.map((x)=>{
        x.style.color = "black"
      })

      //高亮
      this.$refs.btn[idx].style.color = "yellowgreen"
      //导航条位置更改
      this.$refs.point.style.top = `${idx * this.$refs.btn[0].offsetHeight}px`


      //切换显示的组件
      if(idx == 0){
        this.com = "son1"
      }else if(idx == 1){
        this.com = "son2"
      }else if(idx == 2){
        this.com = "son3"
      }else if(idx == 3){
        this.com = "son4"
      }else if(idx == 4){
        this.com = "son5"
      }else if(idx == 5){
        this.com = "son6"
      }else if(idx == 6){
        this.com = "son7"
      }

    },



  },


  created() {


  this.height = document.documentElement.clientHeight
      this.width = document.documentElement.clientWidth

  }


}
</script>

<style lang="less" scoped>

.wappers{
  display: grid;
  grid-template-columns: 200px auto;
  min-width: 1400px;
  background-color: #ffffff;

  //左侧容器
  .leftbar{
    background: white;
    box-shadow:  21px 21px 45px #cccccc,
      -21px -21px 45px #ffffff;

    .titlewapper{
      padding:0 0 0 15px;
      width:100%;
      height: 40px;
      font-size: 15px;
      display : flex;align-items : center;justify-content: flex-start;
    }

    //左侧导航条
    .point{
      position: absolute;
      width: 5px;
      height: 40px;
      background: yellowgreen;
      left: 0;
      transition: 0.5s;
    }
  }


    .center{
      word-break: break-all;
      overflow: hidden;
      margin:34px;
      min-height:92.6vh;
      border-radius: 8px;
      background: white;
      display : flex;align-items : center;justify-content : center;
      box-shadow:  14px 14px 46px #cccccc,
        -14px -14px 46px #ffffff;
    }
  }



</style>
